<template>
  <div>
    <div class="tuwen_box">
      <el-form label-width="120px">
        <el-form-item label="标识">
          <el-input
            :value="active_component.propValue.name"
            :disabled="true"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="走马灯样式">
          <div class="flex jz_box">
            <div
                class="jz-photo-group"
                :class="active_component.propValue.tabIndex == 0 ? 'group_active' : ''"
                @click="changetab(0)"
              >
              <div class="jz_style_img_0 jz_style_img"></div>
            </div>

              <div
                class="jz-photo-group"
                :class="active_component.propValue.tabIndex == 1 ? 'group_active' : ''"
                @click="changetab(1)"
              >
              <div class="jz_style_img_1 jz_style_img"></div>
            </div>

              <div
                class="jz-photo-group"
                :class="active_component.propValue.tabIndex == 2 ? 'group_active' : ''"
                @click="changetab(2)"
              >
              <div class="jz_style_img_2 jz_style_img"></div>
            </div>

          </div>
          
        </el-form-item>
         <el-form-item label="上传图片">
                       <!-- <Upload></Upload> -->
                    <div class="imgList_box flex" v-if="active_component.propValue.swiperList.length">
                      <div  class="img_item" v-for="(item,i) of active_component.propValue.swiperList" :key="i" >
                        <img  :src="item.url" alt="">
                          <i @click="deleteImgItem(i)"  class="closeBtn el-icon-circle-close"></i>
                      </div>
                    </div>                   
                    <div>
                      <el-tag>注：显示不超过8张图片</el-tag>
                   <Upload :text="'上传图片'" @confrim="confrim" :type="'primary'"></Upload>
                    </div>
         </el-form-item>

           <el-form-item label="显示个数">
              <el-input v-model="active_component.propValue.slidesPerView"  type="number"   clearable
          ></el-input>
         </el-form-item>
      </el-form>
    </div>
    <div class="flex-center" style="margin-top:10px;">
      <el-button size="small" type="" @click="closeTK"
        >取消</el-button
      >
       <el-button size="small" type="primary" @click="pushcanvas"
        >确定</el-button
      >
    </div>
  </div>
</template>

<script>
import Upload  from "../Upload/index.vue";
export default {
  props: ["componentId", "componentList","activeCompont"],
  components: {Upload},
  data() {
    return {
      swiperList: [],
      active_component:{},
      swiperIndex: 0,
    };
  },
  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁编辑器
  },
  created() {
  
 let WalkSwiperList=JSON.parse(localStorage.getItem('WalkSwiperList'))?JSON.parse( localStorage.getItem('WalkSwiperList')):[]
  

    if(this.activeCompont){
        this.active_component =this.activeCompont
    }else{
        for (let key in this.componentList) {
      if (
        this.componentList[key].isDialog &&
        this.componentList[key].propValue.value == this.componentId
      ) {
        this.active_component =JSON.parse(JSON.stringify(this.componentList[key])) 
         if(!WalkSwiperList.length){
              this.active_component.propValue.name='walk1'
          }else{
              this.active_component.propValue.name='walk'+(new Date().getTime())
          }
      }
    }
    }
  
  },
   
  methods: {
    deleteImgItem(i){
      this.active_component.propValue.swiperList.splice(i,1)
    },
    onremove(){
           this.active_component.propValue.img=''
    },
    loadSuccess(res){
           this.active_component.propValue.img=res.data
    },
    confrim(e){
      if(this.active_component.propValue.swiperList.length>=8){
        return
      }
      this.active_component.propValue.swiperList.push({url:e,link:'/#'})
    },
    closeTK(){
        this.$emit("closeTK")
    },
    changetab(i) {
      this.active_component.propValue.tabIndex = i;
    },
      getMappingValueArrayOfKey(array,keyName){
            if(Object.prototype.toString.call(array)=='[object Array]'){
                return array.map((item,index)=>{
                    return item[keyName]
                })
            }
            return 'null（参数一应为对象数组）';//不是数组
        },
   async pushcanvas() {
       let WalkSwiperList=JSON.parse(localStorage.getItem('WalkSwiperList'))?JSON.parse( localStorage.getItem('WalkSwiperList')):[]
       let keys=await this.getMappingValueArrayOfKey(WalkSwiperList,'name')
        let active_component=this.active_component
        if(WalkSwiperList.length){
             for(let key in WalkSwiperList){
                  if(keys.includes(active_component.propValue.name)){
                      WalkSwiperList[key].name=active_component.propValue.name
                      WalkSwiperList[key].slidesPerView=active_component.propValue.slidesPerView
                      WalkSwiperList[key].tabIndex=active_component.propValue.tabIndex
                  } else{
                    keys.push(this.active_component.propValue.name)
                    await WalkSwiperList.push({name:this.active_component.propValue.name,slidesPerView:this.active_component.propValue.slidesPerView,tabIndex:this.active_component.propValue.tabIndex})
                  }
              }
        }else{
           keys.push(this.active_component.propValue.name)
                    await WalkSwiperList.push({name:this.active_component.propValue.name,slidesPerView:this.active_component.propValue.slidesPerView,tabIndex:this.active_component.propValue.tabIndex})
        }
   localStorage.setItem('WalkSwiperList',JSON.stringify(WalkSwiperList))

  // console.log(this.$store.state.componentData)
      //从list中筛选出对应的jsan
    //   for (let key in this.componentList) {
    //     if (
    //       this.componentList[key].isDialog &&
    //       this.componentList[key].propValue.value == this.componentId
    //     ) {
    //       console.log(this.componentList[key]); //获取到对应组件数据
          // 进行添加缓存/vuex
        //   let canvasData = JSON.parse(localStorage.getItem("canvasData"));
        
        //   canvasData.push(component);
          // localStorage.setItem("canvasData", JSON.stringify(canvasData));
        //   localStorage.setItem("canvasStyle", JSON.stringify(canvasStyle));
        if(this.activeCompont){
            //  this.$store.commit('setComponentData',this.$store.state.componentData)
              let component = this.active_component;
             if(this.active_component.propValue.tabIndex==0){
              component.style.height=123
           }else if(this.active_component.propValue.tabIndex==1){
                 component.style.height=298
           }else{
                 component.style.height=123
           }
            this.$emit("closeTK")//关闭弹框
        }else{
            let canvasStyle = this.$store.state.canvasStyleData;
          let component = this.active_component;
          component.style.top = Number(canvasStyle.height);
          component.style.left = 600;
          
           if(this.active_component.propValue.tabIndex==0){
              component.style.height=123
           }else if(this.active_component.propValue.tabIndex==1){
                 component.style.height=298
           }else{
                 component.style.height=123
           }
           this.$store.commit("addComponent", { component: component });
            canvasStyle.height = String(
              Number(canvasStyle.height) + Number(component.style.height)
            );
            this.$store.commit("setCanvasStyle", canvasStyle);
            this.$emit("closeTK")//关闭弹框
        }

    //     }
    //   }
    },
  },
};
</script>
<style>
.w-e-bar>div:nth-child(23),.w-e-bar>div:nth-child(24) {
  display: none;
}
</style>
<style lang="scss" scoped>
.tuwen_box {
  width: 300px;
  img {
    width: 100%;
  }
  .jz_box {
    width: 500px;
    >div{
      margin-right: 5px;
    }
  }
  .jz-photo-group {
    width: 64px;
    height: 50px;
    cursor: pointer;
    border: 1px solid #aaa;
    .jz_style_img {
      width: 62px;
      height: 48px;
      background: url("../../assets/iconfont/imageEffect_marquee.gif") no-repeat;
    }
    // .jz_style_img_0 {
    //   background-position: -314px -3px;
    // }
    .jz_style_img_1 {
      background: url("../../assets/iconfont/mbg02.png") no-repeat;
      background-position:1px -471px;
    }
    .jz_style_img_2{
      background: url("../../assets/iconfont/mbg02.png") no-repeat;
     background-position: -315px -507px;
    }
    // .jz_style_img_3 {
    //   background-position: -314px -74px;
    // }
    // .jz_style_img_2 {
    //   background-position: -314px -218px;
    // }
    // .jz_style_img_4 {
    //   background-position: -314px -288px;
    // }
    // .jz_style_img_5 {
    //   background-position: -314px -362px;
    // }
    // .jz_style_img_6 {
    //   background-position: -314px -431px;
    // }
  }
}
.group_active {
  border: 1px solid #5874d8 !important;
  position: relative;
}
.group_active::after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 28px;
  height: 24px;
  background: url("../../assets/iconfont/component.png") no-repeat -197px -24px;
}
.quill-wrap{
    width: 600px;
    margin: 0 auto;
    margin-left: 50px;
}
.imgList_box{
  border: 1px dashed #ddd;
  width: 800px;
  min-height:100px;
  margin-bottom: 5px;
  align-items: center;
  position: relative;
  .img_item{
  position: relative;
  display: flex;
  align-items: center;
  }
  img{
    width: 90px;
    height: 90px;
    object-fit: cover;
    margin-left: 5px;
  }
  .closeBtn{
    position: absolute;
    top: -4px;
    right: -3px;
    z-index: 9;
    font-size: 20px;
    cursor: pointer;
    background: #fff;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
  }
}
</style>

